<template>
	<view class="content">
		<!-- 自定义导航栏 -->
		<uni-nav-bar  class="nav-bar" title="缴费" leftIcon="back" leftText="返回" rightIcon="list"	backgroundColor="#090" color="#fff" 
		 @clickLeft="back" @clickRight="jump">
		</uni-nav-bar>
		<!--f2:累积费用显示-->
		<view class="fee-statistics">
			<text class="hint">当前待缴费用(元)</text>
			<text class="amount">￥{{amount}}</text>
		</view>
		<!--f3:各项费用列表-->
		<uni-list>
			<uni-list-item title="水费" thumb="/static/img/shui.png" thumbSize="lg"
				:rightText="fees.shui>=0 ? '' : `待缴金额：￥${Math.abs(fees.shui)}`" link to="/pages/feePay/feePay?type=1"></uni-list-item>
			<uni-list-item title="电费" thumb="/static/img/dian.png" thumbSize="lg"
				:rightText="fees.dian>=0 ? '' : `待缴金额：￥${Math.abs(fees.dian)}`" link to="/pages/feePay/feePay?type=2"></uni-list-item>
			<uni-list-item title="燃气费" thumb="/static/img/ranqi.png" thumbSize="lg"
				:rightText="fees.ranqi>=0 ? '' : `待缴金额：￥${Math.abs(fees.ranqi)}`" link to="/pages/feePay/feePay?type=3"></uni-list-item>
			<uni-list-item title="物业费" thumb="/static/img/wuye.png" thumbSize="lg"
				:rightText="fees.wuye>=0 ? '' : `待缴金额：￥${Math.abs(fees.wuye)}`" link to="/pages/feePay/feePay?type=4"></uni-list-item>
			<uni-list-item title="停车费" thumb="/static/img/tingche.png" thumbSize="lg"
				:rightText="fees.tingche>=0 ? '' : `待缴金额：￥${Math.abs(fees.tingche)}`" link to="/pages/feePay/feePay?type=5"></uni-list-item>
			<uni-list-item title="宽带费" thumb="/static/img/kuandai.png" thumbSize="lg"
				:rightText="fees.kuandai>=0 ? '' : `待缴金额：￥${Math.abs(fees.kuandai)}`" link to="/pages/feePay/feePay?type=6"></uni-list-item>
		</uni-list>
		
	</view>
</template>

<script>
	import { feeList } from '../../service/index.js'
	export default {
		data() {
			return {
				fees:{}
			}
		},
		
		async onLoad() {
			//访问接口获取当前用户的待缴费用
			this.fees= await feeList()
		},
		//计算属性
		computed:{
			//待缴费用合计
			amount(){
				let sum = 0;
				sum = sum + (this.fees.shui < 0 ? this.fees.shui : 0); 
				sum = sum + (this.fees.dian < 0 ? this.fees.dian : 0); 
				sum = sum + (this.fees.ranqi < 0 ? this.fees.ranqi : 0); 
				sum = sum + (this.fees.tingche < 0 ? this.fees.tingche : 0); 
				sum = sum + (this.fees.wuye < 0 ? this.fees.wuye : 0); 
				sum = sum + (this.fees.kuandai < 0 ? this.fees.kuandai : 0); 
				return Math.abs(sum).toFixed(2);
			}
		},
		methods: {
			// 导航条左右侧的点击事件
			back(){
				uni.navigateBack()
			},
			jump(){
				uni.navigateTo({
					url:'/pages/feeRecod/feeRecod'
				})
			}
			
		
		}
	}
</script>

<style lang="scss" scoped>
.nav-bar{
	display: block;
	::v-deep .uni-navbar__content{
		display: block;
	}
}
	.fee-statistics{
		background-color: $zh-theme-color;
		padding: $uni-spacing-col-lg * 3 0;
		flex-direction: column;
		align-items: center;
		color: $uni-text-color-inverse;
		.hint{
			font-size: $uni-font-size-lg ;
			margin-bottom: $uni-spacing-col-base;
		}
		.amount{
			font-size:$uni-font-size-base;
			font-weight: bold;
		}
	}
</style>
